<template>
  <div>
    <el-form :inline="true" style="margin-bottom: -15px" label-width="130px">
      <!-- <el-form-item style="margin-bottom: 5px">
        <el-button class="el-icon-sort" type="text" @click="convertTabsShow"></el-button>
      </el-form-item> -->
      <el-form-item style="margin-bottom: 5px">
        <el-select v-model="project" clearable placeholder="所属项目..." size="mini" @change="handleSelectProject">
          <el-option-group :key="group.label" :label="group.label" v-for="group in projectList">
            <el-option v-for="item in group.projectList" :key="item.projectId" :label="item.projectName" :value="item.projectId"></el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-select v-model="respType" placeholder="仓库类型" size="mini" clearable style="width: 150px">
          <el-option v-for="item in respTypeList" :key="item.key" :label="item.label" :value="item.label"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item style="margin-bottom: 5px">
        <el-select v-model="devPerson" clearable placeholder="开发负责人..." size="mini" filterable>
          <el-option-group :key="group.userId" :value="group.userId" :label="group.label"  v-for="group in userList">
            <el-option v-for="item in group.options" :key="item.userId" :label="item.userName" :value="item.userId"></el-option>
          </el-option-group>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-select v-model="status" placeholder="状态" size="mini" clearable style="width: 150px">
          <el-option v-for="item in statusList" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" style="margin-bottom: 5px" @click="handleClickSearch">查询</el-button>
      </el-form-item>
      <div style="float:right; margin-top: 5px">
        <pop-vue ref="pop"/>
      </div>
    </el-form>
  </div>
</template>

<script>
  import PopVue from './pop.vue'
  import {findByGroup} from '@/api/user'
  import {getVersion} from '@/api/version'
  import {findProjectByGroup} from '@/api/project'
  import {find} from '@/api/repository'
  export default {
    name: "SearchVue",
    data() {
      return {
        height: `${document.documentElement.clientHeight}`,
        versionList: [],
        respTypeList: [{key: 1, label: 'SIT'},{key: 2, label: 'UAT'},{key: 3, label: 'PP'},{key: 4, label: 'PI'}],
        projectList: [
          {
            label: '开发项目',
            projectList: []
          },
          {
            label: '已关闭项目',
            projectList: []
          }
        ],
        statusList: [
          { key: 0, value: '展示'},
          { key: 1, value: '不展示'},
          // { key: 2, value: '关闭'}
        ],
        devStatusList: [
          { key:0, value: '待确认'},
          { key:1, value: '已分配'},
          { key:2, value: '已提交'},
          { key:3, value: '待测试'},
          { key:4, value: '已完成'},
          { key:5, value: '关闭'}
        ],
        userList: [{
          label: '组长',
          options: []
        }, {
          label: '开发',
          options: []
        }, {
          label: '测试',
          options: []
        }],
        devPerson: '',
        project: '',
        moduleId: [],
        version: '',
        decomposition: '',
        status: 0,
        respType: '',
        popData: {
          userList: [],
          vesrion: [],
          projectList: [],
          moduleKey: 1,
          moduleList: [],
          group: ''
        }
      }
    },
    methods: {
      convertTabsShow() {
        this.changeTableHeight(this.$parent.show)
        this.$parent.convertShow()
      },
      changeTableHeight(show) {
        if (show) {
          this.$parent.$refs.tableList.tableHeight = this.height>900?830:520
        } else {
          this.$parent.$refs.tableList.tableHeight = this.height>900?765:460
        }
        console.log(this.$parent.$refs.tableList.tableHeight)
      },
      handleSelectProject(id) {
        this.popData.moduleKey++
        if (this.project === '' || this.project == null) {
          this.moduleId = []
          this.popData.moduleList = []
          return
        }
        this.popData.projectList.forEach(p => {
          if (p.projectId===id) {
            this.popData.moduleList = p.modules
          }
        })
      },
      handleClickSearch() {
        let data = {
          projectId: this.project,
          status: this.status
        }
        find(data).then(response => {
          // console.log(response)
          this.$parent.$refs.tableList.getTableData(response)
        })
      },
      clickNew(groupId) {
        this.selectData(groupId)
        this.handleClickSearch()
      },
      selectData(groupId) {
        this.popData.group = groupId
        this.userList[0].options=[]
        this.userList[1].options=[]
        this.userList[2].options=[]
        findByGroup(groupId).then(response => {
          this.popData.userList = response
          for (var i=0; i<response.length; i++) {
            var element = response[i]
            if (element.role==="leader") {
              this.userList[0].options.push(element)
            }
            if (element.role==="developer") {
              this.userList[1].options.push(element)
            }
            if (element.role==="tester") {
              this.userList[2].options.push(element)
            }
          }
        });
        this.projectList[0].projectList=[]
        this.projectList[1].projectList=[]
        findProjectByGroup(groupId).then(response => {
          for (var i=0; i<response.length; i++) {
            var element = response[i]
            if (element.status===0) {
              this.projectList[0].projectList.push(element)
            } else {
              this.projectList[1].projectList.push(element)
            }
          }
          this.popData.projectList = response
        })
      },
      initStateData() {

      }
    },
    components: {
      PopVue
    },
    mounted() {
      this.handleClickSearch()
    }
  }

</script>
